<template>
  <div class="page">
    <el-tabs
      style="width: 600px; margin: 20px 0 0 20px"
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane label="账号信息" name="0"></el-tab-pane>
      <el-tab-pane label="企业资料" name="1"></el-tab-pane>
      <!-- <el-tab-pane label="简历大图" name="2"></el-tab-pane> -->
    </el-tabs>
    <!-- 账号 -->
    <el-form
      v-if="activeName == '0'"
      class="form"
      :label-position="labelPosition"
      label-width="80px"
      size="medium"
    >
      <el-form-item label="账号名">
        <span>{{ userInfo.name }}</span>
      </el-form-item>
      <el-form-item label="账号">
        <span>{{ userInfo.phone }}</span>
      </el-form-item>
      <el-form-item label="账号角色">
        <!-- <span>{{ userInfo.role }}</span> -->
        <span>企业</span>
      </el-form-item>
      <template v-if="isNewPass">
        <el-form-item label="新密码">
          <el-input show-password v-model="pass1"></el-input>
        </el-form-item>
        <el-form-item label="再次输入">
          <el-input show-password v-model="pass2"></el-input>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button v-if="!isNewPass" type="info" @click="isNewPass = true"
          >修改密码</el-button
        >
        <el-button v-if="isNewPass" type="info" @click="isNewPass = false"
          >取消</el-button
        >
        <el-button v-if="isNewPass" type="primary" @click="changePassword"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 个人资料 -->
    <el-form
      v-if="activeName == '1'"
      class="form"
      :label-position="labelPosition"
      label-width="80px"
      size="medium"
    >
      <el-form-item label="企业名称">
        <el-input v-model="company.name"></el-input>
      </el-form-item>
      <el-form-item label="注册资金">
        <el-input v-model="company.capital"></el-input>
      </el-form-item>
      <el-form-item label="注册年份">
        <el-date-picker
          v-model="company.year"
          type="year"
          style="width: 100%"
          value-format="yyyy"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="企业人数">
        <el-select v-model="company.people" filterable style="width: 100%">
          <el-option
            v-for="(item, index) in peopleOption"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="company.address"></el-input>
      </el-form-item>
      <el-form-item label="行业">
        <el-select
          placeholder="行业"
          v-model="company.industry"
          style="width: 100%"
        >
          <el-option-group
            v-for="group in industryOption"
            :key="group.label"
            :label="group.label"
          >
            <el-option
              v-for="item in group.options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="人才偏好">
        <el-input
          v-model="company.like"
          type="textarea"
          maxlength="250"
          show-word-limit
          :autosize="{ minRows: 2, maxRows: 4 }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="企业简介">
        <el-input
          v-model="company.introduction"
          type="textarea"
          maxlength="250"
          show-word-limit
          :autosize="{ minRows: 2, maxRows: 4 }"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-if="editType == 'edit'" type="primary" @click="saveCompany"
          >保存</el-button
        >
        <el-button
          v-if="editType == 'init'"
          type="primary"
          @click="initNewCompany"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { cookieData, localData } from "@/util/local";
import { getCompanyById, SetCompany, NewCompany } from "@/api/company";
import { resetPassword, userChange } from "@/api/user";
import { peopleOption, industryOption } from "@/util/selectOption";
export default {
  data() {
    return {
      activeName: "",
      labelPosition: "right",
      company: {
        name: "",
        capital: "",
        year: "",
        people: "",
        address: "",
        industry: "",
        like: "",
        introduction: "",
      },
      peopleOption: peopleOption,
      industryOption:industryOption,
      pass1: "",
      pass2: "",
      userInfo: {},
      editType: "init",
      isNewPass: false,
    };
  },
  methods: {
    handleClick() {
      if (this.activeName == "1" && this.editType == "edit") {
        this.getCompany();
      } else {
        this.company = {
          name: "",
          capital: "",
          year: "",
          people: "",
          address: "",
          industry: "",
          like: "",
          introduction: "",
        };
      }
    },
    getCompany() {
      const param = {
        id: this.userInfo.company_id,
      };
      getCompanyById(param).then((res) => {
        if (res.code == 200) {
          let {
            name,
            capital,
            major,
            year,
            people,
            address,
            industry,
            like,
            introduction,
          } = res.data;
          this.company = {
            name,
            capital,
            major,
            year,
            people,
            address,
            industry,
            like,
            introduction,
          };
        }
      });
    },
    saveCompany() {
      const param = { ...this.company, id: this.userInfo.company_id };
      SetCompany(param).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
        }
      });
    },
    initNewCompany() {
      const param = { ...this.company };
      NewCompany(param).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.editType = "edit";
          let id = res.data.company.id;
          this.userInfo.company_id = id;
          localData("set", "userinfo", this.userInfo);
          const param2 = {
            id: this.userInfo.id,
            company_id: this.userInfo.company_id,
          };
          userChange(param2).then((res) => {
            console.log("个人信息保存成功");
          });
        }
      });
    },
    changePassword() {
      if (!this.pass1) {
        this.$message({
          showClose: true,
          message: "请填写密码",
          type: "warning",
        });
        return;
      }
      if (!this.pass2) {
        this.$message({
          showClose: true,
          message: "请确认密码",
          type: "warning",
        });
        return;
      }
      if (this.pass2 != this.pass1) {
        this.$message({
          showClose: true,
          message: "两次密码输入不一致",
          type: "warning",
        });
        return;
      }
      const param = {
        id: this.userInfo.id,
        password: this.pass1,
      };
      resetPassword(param).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "修改成功，请用新密码重新登录",
            type: "success",
          });
          cookieData("clean", "token");
          localData("clean", "userinfo");
          this.$router.push({ path: "/login" });
        }
      });
    },
  },
  created() {
    this.userInfo = localData("get", "userinfo");
    this.editType = this.userInfo.company_id ? "edit" : "init";
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
}
.page .form {
  width: 400px;
  margin: 20px;
}
</style>